Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
@paprika/popover
Advanced tools
Popover component renders an overlay of content anchored to a trigger button (or specific positioning element). It can be triggered by click (or keypress), by hover (or keyboard focus – as a tooltip), or programatically
Popover component renders an overlay of content anchored to a trigger button (or specific positioning element). It can be triggered by click (or keypress), by hover (or keyboard focus – as a tooltip), or programatically
yarn add @paprika/popover
or with npm:
npm install @paprika/popover
Prop | Type | required | default | Description |
---|---|---|---|---|
align | [ Popover.types.align.TOP, Popover.types.align.RIGHT, Popover.types.align.BOTTOM, Popover.types.align.LEFT] | false | Popover.types.align.BOTTOM | Where the popover content is positioned relative to the trigger or getPositioningElement. |
children | node | true | - | Content of the popover |
isDark | bool | false | false | Displays as a "tooltip" style with white text on black background. |
isEager | bool | false | false | Activated by mouseOver / focus instead of onClick. |
isOpen | bool | false | null | How "controlled" popovers are shown / hidden. |
isPortal | bool | false | true | This renders the popover inline in the DOM and not in a react portal. WARNING: will have side effects with paprika side panels and modals, use with caution. |
defaultIsOpen | bool | false | null | How "uncontrolled" popovers can be rendered open by default. |
edge | [ Popover.types.align.LEFT, Popover.types.align.RIGHT, null] | false | null | Where the edge of the popover content is based on the trigger or getPositioningElement |
maxWidth | [string,number] | false | 320 | Maximum width of popover content. Using a number is recommended and implies px units. |
minWidth | [string,number] | false | 0 | Minimumn width of popover content. Using a number is recommended and implies px units. |
onClose | func | false | null | Callback to fire when user closes popover. |
offset | number | false | parseInt(tokens.spaceLg, 10) | Distance, in px, between popover content edge and trigger / getPositioningElement. |
getPositioningElement | func | false | null | Function that provides DOM element to use as target for positioning the popover. |
getScrollContainer | func | false | null | Function that provides the scrolling DOM element that contains the popover. |
shouldKeepFocus | bool | false | false | If focus will stay at the trigger when showing popover. Popover can still be closed when clicking outside or pressing escape key. |
zIndex | number | false | zValue(1) | Number setting the z-index for the popover content / tip. |
Prop | Type | required | default | Description |
---|---|---|---|---|
a11yText | string | false | null | Descriptive a11y text for assistive technologies for the trigger. |
children | [func,node] | true | - |
Prop | Type | required | default | Description |
---|---|---|---|---|
children | node | false | null | |
onBlur | func | false | () => {} | Callback to indicate the element loses focus |
Prop | Type | required | default | Description |
---|---|---|---|---|
children | node | true | - |
Prop | Type | required | default | Description |
---|---|---|---|---|
zIndex | number | false | null | Number setting the z-index |
The <Popover>
can be used as a controlled or uncontrolled component. If controlled, the isOpen
and onClose
props must be utilized.
The <Popover>
can be used as a tooltip by making it open "eagerly" on hover or keyboard focus via the isEager
prop. Typically a very short tooltip is also designed with white text on a black background, achieved with the isDark
prop.
With an uncontrolled <Popover>
, it may be convenient to use the <Popover.Trigger>
to wrap the element the user will interact with to display the popover because this results in a <RawButton>
being wrapped around that UI element, with all of the handlers it requires already hooked up.
For a controlled <Popover>
, or the case where the <Popover.Trigger>
child element is a <Button>
, it is necessary to use a render function for the children
of the <Popover.Trigger>
, which will be provided with a generic handler
argument.
It may not be necessary to use a <Popover.Trigger>
element at all if the <Popover>
is controlled. Then its children
(excluding <Popover.Content>
and <Popover.Tip>
) will by default be used as the positioning element (see Basic controlled example below).
Content for the <Popover>
is also included as children, wrapped by the <Popover.Content>
. For a "card" style, the <Popover.Card>
is a convenient helper.
To include an arrow that points to the trigger element, the <Popover.Tip>
can be included as a sibling element of the <Popover.Content>
(include it after the Content to avoid an explicit zIndex prop on the Tip).
import Popover from "@paprika/popover";
<Popover>
<Popover.Trigger>
<Icon />
</Popover.Trigger>
<Popover.Content>
<Popover.Card>Lorem hipsum kombucha leggings vinyl.</Popover.Card>
</Popover.Content>
<Popover.Tip />
</Popover>;
import Popover from "@paprika/popover";
const [isOpen, setOpen] = React.useState(false);
<Popover isOpen={isOpen} onClose={() => { setOpen(false) }>
<Button onClick={() => { setOpen(prevOpen => !prevOpen) }}>
Open Popover
</Button>
<Popover.Content>
<Popover.Card>
Lorem hipsum kombucha leggings vinyl.
</Popover.Card>
</Popover.Content>
<Popover.Tip />
</Popover>
FAQs
Popover component renders an overlay of content anchored to a trigger button (or specific positioning element). It can be triggered by click (or keypress), by hover (or keyboard focus – as a tooltip), or programatically
The npm package @paprika/popover receives a total of 5,877 weekly downloads. As such, @paprika/popover popularity was classified as popular.
We found that @paprika/popover demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.